<template>
	<view class="recycle-detail">
		<Nav title="回收明细" :bgColor="bgColor" @back="back"></Nav>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key='index'>
				<view class="item-left">
					<image :src="$util.img(item.goods_img)" mode="widthFix"></image>
				</view>
				<view class="item-right">
					<view class="name">{{item.goods_name}}</view>
					<view class="price">
						<view>花费总额</view>
						<view class="price-content">
							<image src="../../../static/image/money.png" mode="widthFix"></image>
							<text>{{item.box_amount}}</text>
						</view>
					</view>
					<view class="price">
						<view>回收返还</view>
						<view class="price-content">
							<image src="../../../static/image/money.png" mode="widthFix"></image>
							<text>{{item.back_amount}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Nav from "@/components/magic-box/magic-nav/index.vue";
	import navMixin from "@/common/js/nav.js"
	export default {
		components: {
			Nav,
		},
		mixins: [navMixin],
		data() {
			return {
				id: "",
				list: []
			}
		},
		onLoad({
			id = 0,
			list=""
		}) {
			if(list){
				this.list=JSON.parse(list)
			}
			else{
				this.id = id
				this.getRecycleDetail()
			}
			
		},
		methods: {
			async getRecycleDetail() {
				try {
					const result = await this.$api.sendRequest({
						url: "/api/member/recoverydetail",
						data: {
							id: this.id
						},
						async: false
					})
					this.list = result.data
				} catch (e) {
					//TODO handle the exception
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.recycle-detail {
		.list {
			.item {
				padding: 28rpx 24rpx;
				box-sizing: border-box;
				display: flex;
				background: #FFFFFF;
				margin-bottom: 14rpx;

				.item-left {
					width: 181rpx;
					height: 181rpx;
					flex-shrink: 0;
					border: 1px solid #CDCDCD;
					border-radius: 6rpx;
					margin-right: 31rpx;

					>image {
						width: 100%;
					}
				}

				.item-right {
					flex: 1;

					.name {
						font-size: 31rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #000000;
						padding-bottom: 13rpx;
						border-bottom: 1px solid rgba(0, 0, 0, 0.2);
					}

					.price {
						display: flex;
						margin-top: 14rpx;

						.price-content {
							margin-left: 42rpx;

							>image {
								width: 26rpx;
								margin-right: 15rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
